<template>
	<view class="login-container">
		<!-- 背景纹理层 -->
		<view class="texture-overlay"></view>

		<!-- 顶部留白 -->
		<view class="top-space"></view>

		<!-- 登录内容区 -->
		<view class="login-content">
			<!-- 顶部标题 -->
			<view class="login-header">
				<text class="title">欢迎登录</text>
				<text class="subtitle">开启您的纸境之旅</text>
			</view>


			<button class="quick-login-btn" @click="handleQuickLogin">
				<text class="btn-text">一键登录</text>
				<view class="ink-effect"></view>
			</button>

			<!-- 分割线 -->
			<view class="divider">
				<view class="divider-line"></view>
				<text class="divider-text">或</text>
				<view class="divider-line"></view>
			</view>

			<!-- 第三方登录 -->
			<view class="third-party-login">
				<text class="third-title">快捷登录</text>
				<view class="platforms">
					<view class="platform-item" @click="wxLogin">
						<view class="platform-icon-wrapper">
							<image class="platform-icon" src="/static/images/wx.png" mode="aspectFit"></image>
						</view>
						<text class="platform-name">微信</text>
					</view>
					<view class="platform-item">
						<view class="platform-icon-wrapper">
							<image class="platform-icon" src="/static/images/QQ.png" mode="aspectFit"></image>
						</view>
						<text class="platform-name">QQ</text>
					</view>
					<view class="platform-item" @click="userLogin">
						<view class="platform-icon-wrapper">
							<image class="platform-icon" src="/static/images/user.png" mode="aspectFit"></image>
						</view>
						<text class="platform-name">账号登录</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部协议 -->
		<view class="agreement">
			<text class="agreement-text">登录即表示同意</text>
			<text class="agreement-link">《用户协议》</text>
			<text class="agreement-text">和</text>
			<text class="agreement-link">《隐私政策》</text>
		</view>
	</view>
</template>

<script setup>
	import {
		apiRegister
	} from "@/api/apis.js"


	const handleQuickLogin = async () => {
		// #ifdef MP

		const res = await uni.login();
		// 调用封装好的 apiRegister 方法进行注册
		const params = {
			code: res.code
		}
		const apiRes = await apiRegister(params);

		if (apiRes.code === "200") {
			uni.setStorageSync("token", apiRes.data.token)
			uni.setStorageSync("userInfo", apiRes.data.user)

			uni.showToast({
				title: "登录成功",
				icon: "none"
			})

			uni.switchTab({
				url: '/pages/my/my'
			})
		}
		// #endif

		// #ifndef MP
		uni.showToast({
			title: '暂不支持',
			icon: 'none'
		});
		// #endif
	}



	const userLogin = () => {
		// #ifdef MP
		// 当前是小程序环境，不支持
		uni.showToast({
			title: '暂不支持',
			icon: 'none'
		});
		return;
		// #endif

		// #ifndef MP
		// 非小程序平台（H5、App等），正常跳转登录
		uni.navigateTo({
			url: '/pagesMember/login/login'
		});
		// #endif
	};
</script>

<style lang="scss" scoped>
	.login-container {
		position: relative;
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding: 0 80rpx;
		background: linear-gradient(135deg, #f5f1ea 0%, #e8e0d5 50%, #d8cdbc 100%);
		overflow: hidden;
	}

	.texture-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm-6 60c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm29 22c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z' opacity='0.05' fill='%23000'/%3E%3C/svg%3E");
		mix-blend-mode: multiply;
		opacity: 0.4;
	}

	.top-space {
		margin-top: 380rpx;
		min-height: 100rpx;
	}

	.login-content {
		position: relative;
		z-index: 1;
		flex-shrink: 0;
		margin-bottom: auto;
	}

	.login-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 80rpx;

		.title {
			font-size: 52rpx;
			font-weight: bold;
			color: #5a4a3a;
			margin-bottom: 16rpx;
			text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.1);
		}

		.subtitle {
			font-size: 30rpx;
			color: #8a7b6a;
			letter-spacing: 2rpx;
		}
	}

	.quick-login-btn {
		position: relative;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 50rpx;
		background: linear-gradient(to right, #a38f7b 0%, #c2b4a1 100%);
		color: #fff;
		font-size: 34rpx;
		border: none;
		box-shadow: 0 8rpx 24rpx rgba(90, 74, 58, 0.3);
		margin-bottom: 60rpx;
		overflow: hidden;
		transition: all 0.3s ease;

		.btn-text {
			font-weight: 500;
			position: relative;
			z-index: 1;
			letter-spacing: 4rpx;
		}

		.ink-effect {
			position: absolute;
			background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
			transform: scale(0);
			opacity: 0;
			width: 200rpx;
			height: 200rpx;
			border-radius: 50%;
			transition: transform 0.6s, opacity 1s;
		}

		&:active .ink-effect {
			transform: scale(1);
			opacity: 1;
		}

		&::after {
			border: none;
		}
	}

	.divider {
		display: flex;
		align-items: center;
		width: 100%;
		margin-bottom: 60rpx;

		.divider-line {
			flex: 1;
			height: 1rpx;
			background: linear-gradient(to right, transparent, #c2b4a1, transparent);
		}

		.divider-text {
			padding: 0 30rpx;
			color: #8a7b6a;
			font-size: 26rpx;
		}
	}

	.third-party-login {
		width: 100%;
		margin-top: 20rpx;

		.third-title {
			display: block;
			text-align: center;
			color: #8a7b6a;
			font-size: 28rpx;
			margin-bottom: 40rpx;
			letter-spacing: 2rpx;
		}

		.platforms {
			display: flex;
			justify-content: center;
			gap: 80rpx;

			.platform-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.platform-icon-wrapper {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					background: rgba(255, 255, 255, 0.7);
					display: flex;
					justify-content: center;
					align-items: center;
					box-shadow: 0 4rpx 12rpx rgba(90, 74, 58, 0.1);
					transition: transform 0.3s ease;

					&:active {
						transform: scale(0.95);
					}
				}

				.platform-icon {
					width: 60rpx;
					height: 60rpx;
				}

				.platform-name {
					font-size: 28rpx;
					color: #5a4a3a;
					margin-top: 16rpx;
				}
			}
		}
	}

	.agreement {
		margin-top: auto;
		padding-bottom: 80rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		font-size: 26rpx;
		position: relative;
		z-index: 1;

		.agreement-text {
			color: #8a7b6a;
		}

		.agreement-link {
			color: #a38f7b;
			text-decoration: underline;
		}
	}
</style>